<!DOCTYPE html>
<html>
<head>
    <title>jquery表单验证</title>
    <style>
        .star{
            color: #000;
        }
        .dt{
            padding-top: 10px;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    $(function(){
        $("form :input.required").each(function(){
            var $required = $("<Strong class='star'>*</Strong>");//创建元素
            $(this).parent().append($required);
        })
        $("form :input").blur(function(){
            if($(this).is("#username")){
                if($(this).val()==""){
                    alert("用户名不能为空!");
                }
            }
            if($(this).is("#pwd")){
                if($(this).val()==""){
                    alert("密码不能为空！");
                }
            if(this.value.length < 8){
                    alert("密码不能小于8位，请重新输入！");
                }
            }
        })
    })
    </script>
</head>
<body>
    <form>
<h3 align = "center">用户注册</h3>
<div class="dt">
    用户名: <input type="text" id="username" name="username" size=20 class="required" />
</div>
<div class="dt">
    密&nbsp;&nbsp;码：<input type="password" id="pwd" name="pwd" size=20 class="required" />
</div>
<div class="dt">
    电&nbsp;&nbsp;话：<input type="text" id="phone" name="phone" size=11 maxLength=11 />
</div>
<div class="dt">
    地&nbsp;&nbsp;址：<input type="text" id="address" name="address" size=20 maxLength=20 />
</div>
<div>
    <input type="submit" name="sub" volue="注册" />
</div>
</form>
</body>
</html>
